﻿@page
@model Opac2023.Pages.Index

<div class="row">
    <div class="col-lg-8 offset-lg-2 mt-3">

        <div class="input-group">
            <div class="form-control">
                <label for="database-selector" class="form-control">База данных: </label>
            </div>
            <select id="database-selector" class="btn btn-outline-primary">
            </select>
            <button id="add-row" class="btn btn-sm btn-outline-secondary"
                    style="width: 5em;"
                    data-bs-toggle="tooltip" data-bs-placement="top"
                    title="добавление строки">
                <i class="fas fa-plus"></i>
            </button>
        </div>

        <form id="main-form" autocomplete="off">
            <div id="input-container"></div>

            <div class="input-group-text">
                <label for="how-many">ограничить&nbsp;</label>
                <select id="how-many" class="form-select" style="width: 5em;">
                    <option value="10">10</option>
                    <option value="50" selected>50</option>
                    <option value="100">100</option>
                    <option value="500">500</option>
                </select>
                &nbsp;
                <label for="format-selector" class="form-check-label">формат выдачи&nbsp;</label>
                <select id="format-selector" class="form-control" style="width: 10em;">
                    <option value="@@" selected>полный</option>
                    <option value="@@infow_h">информационный</option>
                    <option value="@@brief">краткий</option>
                </select>
                &nbsp;
                <!-- input id="full-text" type="checkbox" class="form-check-input"
                       data-bs-toggle="tooltip" data-bs-placement="top"
                       title="только документы с полным текстом">
                &nbsp;
                <label for="full-text">полный текст</label -->
            </div>

            <div class="input-group mt-3 mb-3">
                <button type="submit" class="btn btn-primary form-control">Поиск</button>
                <button type="reset" class="btn btn-outline-primary form-control">Сброс</button>
            </div>

        </form>

        <div id="busy-indicator" class="text-center mb-5" style="display: none;">
            <h2>
                <img id="arctic-fox" src="/img/fox.gif" alt="полярная лиса">
            </h2>
        </div>

        <div id="error-indicator" class="text-center text-danger mb-5" style="display: none;">
            <h2 id="error-message">Произошла ошибка</h2>
        </div>

    </div>

</div>

<div class="row">
    <div class="col">
        <div id="result-container">
        </div>
    </div>
</div>

<script type="text/javascript">

    // путь к бэк-энду
    const baseURL = 'https://library.istu.edu/Jsoner.php'

    let scenarios = [] // сценарии поиска
    let inputRows = [] // строки со значениями поисковых атрибутов

    let allOk = true // флаг: можно продолжать работать

    const databaseSelector = document.getElementById('database-selector')
    const inputContainer = document.getElementById('input-container')
    const howMany = document.getElementById('how-many')
    const formatSelector = document.getElementById('format-selector')
    //const fullText         = document.getElementById ('full-text')
    const busyIndicator = document.getElementById('busy-indicator')
    const errorIndicator = document.getElementById('error-indicator')
    const errorMessage = document.getElementById('error-message')
    const resultContainer = document.getElementById('result-container')

    function show(element, state) {
        element.style.display = state ? "initial" : "none"
    }

    function showBusy() {
        show(busyIndicator, true)
    }

    function hideBusy() {
        show(busyIndicator, false)
    }

    function showError(message) {
        errorMessage.innerText = message
        show(errorIndicator, true)
    }

    function hideError() {
        show(errorIndicator, false)
    }

    function buildTerm(row) {
        if (row.input.value) {
            return '"' + row.select.value + row.input.value + (row.check.checked ? '$' : '') + '"'
        }

        return ''
    }

    function buildExpression() {
        let expression = ''
        for (const row of inputRows) {
            let term = buildTerm(row)
            if (term) {
                expression = expression ? (expression + ' * ' + term) : term
            }
        }

        if (!expression) {
            return ''
        }

        const database = databaseSelector.value
        const format = formatSelector.value
        const limit = howMany.value
        // noinspection UnnecessaryLocalVariableJS
        const result = baseURL + '?op=search_format&db=' + database + '&expr=' + encodeURIComponent(expression) + '&format=' + format + "&limit=" + limit
        // console.log (result)

        return result
    }

    function handleSuccess(data) {
        const documents = data.sort()
        // console.log ('Найдено: ' + documents.length)

        if (documents.length === 0) {
            showError('Не найдено ни одного документа, удовлетворяющего заданным условиям')
            return
        }

        // let index = 0
        for (const description of documents) {
            const item = document.createElement('div')
            item.classList.add('found-card')
            item.innerHTML = description
            resultContainer.appendChild(item)
        }
    }

    function handleSubmit() {
        hideError()
        resultContainer.innerHTML = ''
        const url = buildExpression()
        if (!url) {
            return false
        }

        showBusy()
        axios.get(url)
            .then(function (response) {
                handleSuccess(response.data)
                hideBusy()
            })
            .catch(function (error) {
                console.log(error)
                hideBusy()
                //showError ('Сервер не ответил либо прислал невалидный ответ')
                showError(error.message)
            })

        return false
    }

    function somethingWentWrong(error) {
        console.log(error)
        showError(error.message)
        allOk = false

        // запрещаем форму, точнее, все ее элементы
        const form = document.getElementById('main-form')
        for (const element of form.elements) {
            element.disabled = true
            element.readOnly = true
        }
    }

    function createRow() {
        const inputGroup = document.createElement('div')
        inputGroup.classList.add('input-group')

        const select = document.createElement('select')
        select.classList.add('btn')
        select.classList.add('btn-outline-primary')
        inputGroup.appendChild(select)

        const input = document.createElement('input')
        input.classList.add('form-control')
        input.type = 'text'
        inputGroup.appendChild(input)

        const div = document.createElement('div')
        div.classList.add('input-group-text')
        inputGroup.appendChild(div)

        const check = document.createElement('input')
        check.classList.add('form-check-input')
        check.type = 'checkbox'
        check.checked = true
        check.title = 'усечение'
        check.setAttribute('data-bs-toggle', 'tooltip')
        check.setAttribute('data-bs-placement', 'top')
        // new Tooltip (check)
        div.appendChild(check)

        inputContainer.appendChild(inputGroup)

        const row = {
            group: inputGroup,
            select: select,
            input: input,
            check: check
        }
        inputRows.push(row)
    }

    function fillTheRow(row, indexToSelect) {
        const select = row.select
        select.innerHTML = ''
        let index = 0
        for (const scenario of scenarios) {
            const option = document.createElement('option')
            if (index === indexToSelect) {
                option.selected = true
            }
            index++
            option.value = scenario.prefix
            option.innerText = scenario.name
            select.appendChild(option)
        }
    }

    function fillSearchAttributes() {
        let indexToSelect = 0
        for (const row of inputRows) {
            fillTheRow(row, indexToSelect)
            indexToSelect++
            if (indexToSelect >= scenarios.length) {
                indexToSelect = 0
            }
        }
    }

    function addRow() {
        createRow()
        fillTheRow(inputRows[inputRows.length - 1], 0)

        return false
    }

    setTimeout(function () {

        const addRowButton = document.getElementById('add-row')
        addRowButton.onclick = addRow
        // new Tooltip (addRowButton)

        // new Tooltip (document.getElementById ('full-text'))

        const mainForm = document.getElementById('main-form')
        mainForm.onsubmit = handleSubmit

        // получаем список баз данных
        showBusy()
        axios.get(baseURL + '?op=list_db&spec=1..dbnam3.mnu')
            .then(function (response) {
                let first = true
                for (const db of response.data) {
                    const option = document.createElement('option')
                    option.value = db.name
                    option.innerText = db.name + ' - ' + db.description
                    if (first) {
                        option.selected = true
                    }
                    first = false
                    databaseSelector.appendChild(option)
                }
            })
            .catch(function (error) {
                somethingWentWrong(error)
            })
            .then(function () {
                if (allOk) {
                    axios.get(baseURL + '?op=scenarios')
                        .then(function (response) {
                            scenarios = response.data
                            fillSearchAttributes()
                            hideBusy()
                        })
                        .catch(function (error) {
                            somethingWentWrong(error)
                        })
                }
            })

        if (allOk) {
            // по умолчанию у нас три строки
            createRow()
            createRow()
            createRow()
        }
    })

</script>
